---
title: Properties and Methods
slug: /properties-and-methods
sidebar_position: 5
---

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import {
  IconBrandReact,
  IconBrandAngular,
  IconBrandVue,
  IconBrandSvelte
} from "@tabler/icons";

If you check the API documentation of the [View360](/docs/api/Class/View360), you can see that there are various properties and methods defined in **Properties** and **Methods** section.

These properties and methods are defined in an instance of View360. That is, if you want to display the item [yaw](/docs/api/Class/Camera#yaw) on the console, and then invoke the [load()](/docs/api/Class/View360#load) method, you can write the code as follows:

```js
// I'll skip the option here.
const view360 = new View360(...);

// Print the current yaw value to the console window
console.log(view360.camera.yaw);

// Load new projection
view360.load(...);
```

The same can be used if you are using a framework such as React (e.g., `@egjs/react-view360`).
Different frameworks have different approaches to getting a reference of the component, but the rest is the same.
Below is an example.

<Tabs
  groupId="options"
  defaultValue="react"
  lazy={true}
  values={[
    {
      label: <div className="framework-wrapper">
        <IconBrandReact width="18" height="18" /> React
      </div>,
      value: "react",
      attributes: {
        "data-framework": "react"
      }
    },
    {
      label: <div className="framework-wrapper">
        <IconBrandAngular width="18" height="18" /> Angular
      </div>,
      value: "ng",
      attributes: {
        "data-framework": "ng"
      }
    },
    {
      label: <div className="framework-wrapper">
        <IconBrandVue width="18" height="18" /> Vue@2
      </div>,
      value: "vue2",
      attributes: {
        "data-framework": "vue"
      }
    },
    {
      label: <div className="framework-wrapper">
        <IconBrandVue width="18" height="18" /> Vue@3
      </div>,
      value: "vue3",
      attributes: {
        "data-framework": "vue"
      }
    },
    {
      label: <div className="framework-wrapper">
        <IconBrandSvelte width="18" height="18" /> Svelte
      </div>,
      value: "svelte",
      attributes: {
        "data-framework": "svelte"
      }
    }
  ]}>
  <TabItem value="react">

```tsx
import React, { useRef, useEffect } from "react";
import View360 from "@egjs/view360";

// Suppose it's Typescript(.tsx) file
export default () => {
  const viewerRef = useRef<View360>();

  useEffect(() => {
    // We got an instance of View360. This provides access to properties and methods.
    const view360 = viewerRef.current;

    console.log(view360.camera.yaw);
    view360.load(...);
  }, []);

  return <View360 ref={viewerRef} />;
}
```

  </TabItem>
  <TabItem value="ng">

```ts
import { Component, ViewChild } from "@angular/core";

@Component({
  selector: "demo-comp",
  template: "<ngx-view360 #viewer />"
})
export class DemoComponent {
  // You can access properties and methods using this.view360.
  @ViewChild("viewer") public view360;

  public printCurrentYaw() {
    console.log(this.view360.camera.yaw);
  }

  public loadNewProjection() {
    this.view360.load(...);
  }
}
```

  </TabItem>
  <TabItem value="vue2">

```html
<template>
  <view360 ref="viewer" />
</template>
<script lang="ts">
import Vue from "vue";

// You can access the instance with this.$refs.viewer.
// Using this, you can access properties or invoke methods.
export default Vue.extend({
  methods: {
    printCurrentYaw() {
      console.log(this.$refs.viewer.camera.yaw);
    },
    loadNewProjection() {
      this.$refs.viewer.load(...);
    }
  }
});
</script>
```

  </TabItem>
  <TabItem value="vue3">

```html
<template>
  <view360 ref="viewer" />
</template>
<script lang="ts">
import { defineComponent } from "vue";

// You can access the instance with this.$refs.viewer.
// Using this, you can access properties or invoke methods.
export default defineComponent({
  methods: {
    printCurrentYaw() {
      console.log(this.$refs.viewer.camera.yaw);
    },
    loadNewProjection() {
      this.$refs.viewer.load(...);
    }
  }
});
</script>
```

  </TabItem>
  <TabItem value="svelte">

```html
<script lang="tsx">
import View360 from "@egjs/svelte-view360";

// You can bind component instance to this variable using "bind:this".
// Using this, you can access properties or invoke methods.
let view360: View360;

function printCurrentYaw() {
  console.log(view360.camera.yaw);
}

function loadNewProjection() {
  view360.load(...);
}
</script>

<View360 bind:this={view360}>
```

  </TabItem>
</Tabs>
